<template>
  <div class="tomorrow">
    <div class="underwaylist"
         v-for="(item, key) in underwayList"
         :key = key
         @click="commodity"
    >
      <img v-lazy="item.img" alt="">
      <div class="content">
        <p class="title">{{item.title}}</p>
        <div class="describe">
          <span>{{item.idiom[0]}}</span>|<span>{{item.idiom[1]}}</span>|<span>{{item.idiom[2]}}</span>
        </div>
        <div class="mail">
          <i class="ticket"></i> <span>包邮</span>
        </div>
        <div class="price"><p>￥<span>{{item.price}}</span><del>￥{{item.cost}}</del></p><button>马上抢</button></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tomorrow",
    data(){
      return{
        underwayList:[]
      }
    },
    methods:{
      commodity(){
        this.$router.push({path:'/index/commodity/commodity'})
      },
      getuse(){
        this.$http.get('/underway')
          .then((res) => {
            this.underwayList = res.data.underway;
            console.log(res.data.underway);
          })
          .catch((err) => {
            console.log(err);
          })
      }
    },
    created() {
      this.getuse()
    }
  }
</script>

<style scoped lang="scss">
  .tomorrow{
    width: 100vw;
    box-sizing: border-box;
    padding: 30px 35px;
    overflow: hidden;
    .underwaylist{
      height:490px;
      border-radius: 30px;
      padding: 30px;
      display: flex;
      box-sizing: border-box;
      background-color: white;
      margin: 30px 0;
      img{
        width: 430px;
        height: 430px;
        border-radius: 20px;
        margin-right: 30px;
      }
      .content{
        flex: 1;
        .title{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; //需要控制的文本行数
          overflow: hidden;
        }
        .describe{
          font-size: 40px;
          line-height: 60px;
          color: #9a9a9a;
          display: flex;
          span{
            flex: 1;
            text-align: center;
          }
        }
        p{
          font-size: 45px;
          color: #333;
          line-height: 65px;
          margin: 0;
        }
        .mail{
          height: 50px;
          line-height: 50px;
          margin: 25px 0 90px;
          font-size: 30px;
          span{
            width: 110px;
            height: 50px;
            display: inline-block;
            border-radius: 30px;
            background: orangered;
            text-align: center;
            color: white;
          }
          .ticket{
            background: #fbe7ef;
            color: #eb477b;
            line-height: 50px;
            border-radius: 30px;
            margin-right: 30px;
          }
        }
        .price{
          font-size: 30px;
          color:orangered;
          display: flex;
          p{
            flex: 1;
            line-height: 85px;
            font-size: 30px;
            color: orangered;
            span{
              font-size: 50px;
            }
            del{
              color: #ccc;
            }
          }
          button{
            width: 190px;
            height: 85px;
            background-color: #fff;
            outline: none;
            border-radius: 40px;
            border: solid 2px #ddd;
            color: #999;
          }
        }
      }
    }
  }
</style>
